import React, { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { connect } from 'react-redux';

import { getFilmList } from '../../redux/action/FilmActionCreator';

const useNowPlaying = (props) => {
  const { cityId, list, getFilmList } = props;

  useEffect(() => {
    list.length === 0 && getFilmList(cityId);
    return () => {};
  }, [cityId, list.length, getFilmList]);

  return {
    list,
  };
};

const NowPlaying = (props) => {
  const { list } = useNowPlaying(props);

  const navigate = useNavigate();
  return (
    <div>
      <ul>
        {list.map((item) => {
          return (
            <li
              key={item.filmId}
              onClick={() => navigate(`/film/detail/${item.filmId}`)}>
              {item.name}
            </li>
          );
        })}
      </ul>
    </div>
  );
};

const MapStateToPropsParam = (state) => {
  return {
    cityId: state.CityReducer.city.id,
    list: state.FilmReducer.filmList,
  };
};

const MapDispatchToPropsParam = {
  getFilmList,
};

export default connect(
  MapStateToPropsParam,
  MapDispatchToPropsParam
)(NowPlaying);
